Create custom ToolTips components in flex.

The default tooltip component in flex is  Text ,so to change this we have to define a component which implements 

1.Here iam using panel as my tooltip component and the code contains simple the set and get methods as below..

ToolTipComponents/PanelToolTip.mxml

<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;
implements=”mx.core.IToolTip”
width=”200″
alpha=”.8″
borderThickness=”2″
backgroundColor=”white”
dropShadowEnabled=”true”
borderColor=”black”
borderStyle=”solid”
shadowDistance=”10″ shadowDirection=”right”>
<mx:Script><![CDATA[
[Bindable]
public var bodyText:String = “”;

//  Implement required methods of the IToolTip interface; these
//  methods are not used in this example, though.
public var _text:String;

public function get text():String {
return _text;
}
public function set text(value:String):void {
}
]]></mx:Script>

<mx:Text text=”{bodyText}” percentWidth=”100″/>

</mx:Panel>

and the app code looks like this..

2.

<?xml version=”1.0″ encoding=”utf-8″?>
<!– customtooltip.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”absolute”>
<mx:Script><![CDATA[
import ToolTipComponents.PanelToolTip;
import mx.events.ToolTipEvent;

private function createCustomTip(title:String, body:String,
event:ToolTipEvent):void {
var ptt:PanelToolTip = new PanelToolTip();
ptt.title = title;
ptt.bodyText = body;
event.toolTip = ptt;
}
]]></mx:Script>

<mx:Button id=”b2″
label=”Generate”
toolTip=” ”
toolTipCreate=”createCustomTip(‘GENERATE’,’Click this button to generate the report.’, event)”
x=”269″ y=”170″/>
<mx:Button id=”b1″
label=”Delete”
toolTip=” ”
toolTipCreate=”createCustomTip(‘DELETE’,’Click this button to delete the report.’, event)”
x=”405″ y=”170″/>

<mx:Button id=”b3″
label=”Stop”
toolTip=”Click this button to stop the creation of the report.
This button uses a standard ToolTip style.”
x=”528″ y=”170″/>

</mx:Application>

This snapshot give the panel as tooltip…